<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel" v-if="disableSubmit">关闭</a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="应用名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['appName',validatorRules.appName]" placeholder="请输入应用名称" :readOnly="disableSubmit"></a-input>
        </a-form-item>

        <a-form-item label="应用简称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['shortName']" placeholder="请输入应用简称" :readOnly="disableSubmit"></a-input>
        </a-form-item>

        <a-form-item label="应用编码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['appCode',validatorRules.appCode]" placeholder="请输入应用编码" :readOnly="disableSubmit"></a-input>
        </a-form-item>

        <a-form-item label="所属系统" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag
            :triggerChange="true"
            dictCode="SYSTEM_CODE"
            v-decorator="[ 'systemCode', validatorRules.systemCode]"
            placeholder="请选择所属系统"
            :disabled="disableSubmit" >
          </j-dict-select-tag>
        </a-form-item>

        <a-form-item label="应用类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-dict-select-tag
            :triggerChange="true"
            dictCode="APP_TYPE"
            v-decorator="[ 'appType', validatorRules.appType]"
            placeholder="请选择所属系统"
            :disabled="disableSubmit"
            @change="handleChange">
          </j-dict-select-tag>
        </a-form-item>
        <a-form-item label="应用管理组织" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            placeholder="请选择应用管理组织"
            optionFilterProp="children"
            :autoClearSearchValue="false"
            style="width: 100%"
            v-decorator="['appOrgId']"
            :getPopupContainer="(target) => target.parentNode">
            <a-select-option :value="undefined">请选择</a-select-option>
            <a-select-option v-for="(item, index) in tenantList" :key="index" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item v-if="appType=='4'" label="APP二维码" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="appIconFile-uploader" text="上传" v-model="appIconFile" :disabled="disableSubmit"></j-image-upload>
        </a-form-item>
        <a-form-item v-else label="应用图标" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-image-upload class="appIconFile-uploader" text="上传" v-model="appIconFile" :disabled="disableSubmit"></j-image-upload>
        </a-form-item>

        <a-form-item v-if="appType=='4'" label="APP下载地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['appUrl']" placeholder="请输入APP下载地址" :readOnly="disableSubmit"></a-input>
        </a-form-item>
        <a-form-item v-else label="应用URL" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['appUrl']" placeholder="请输入应用URL" :readOnly="disableSubmit"></a-input>
        </a-form-item>
        <!--<a-form-item label="SSOURL" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['ssoUrl']" placeholder="请输入SSOURL" :readOnly="disableSubmit"></a-input>
        </a-form-item>-->

        <a-form-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group name="isEnable" v-decorator="[ 'isEnable', {initialValue:1}]" :disabled="disableSubmit">
            <a-radio :value="1">启用</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>

      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import JImageUpload from '@/components/jeecg/JImageUpload';
  import pick from 'lodash.pick'
  import { addApp, editApp } from '../service.js'
  import { queryTenantChildList } from '@views/system/user/service';
  import { TENANT_ID } from '@/store/mutation-types';
  import Vue from 'vue';

  export default {

    name: 'AppModal',
     components: {
      JImageUpload
    },
    data() {
      return {
        title: '操作',
        visible: false,
        disableSubmit: false,
        tenantList: [],
        tenantId: Vue.ls.get(TENANT_ID),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          appName: { rules: [{ required: true, message: '请输入应用名称!' }] },
          appCode: { rules: [{ required: true, message: '请输入应用编码!' }] },
          systemCode: { rules: [{ required: true, message: '请选择所属系统!' }] },
          appType: { rules: [{ required: true, message: '请选择应用类型!' }] },
          appUrl: { rules: [{ required: true, message: '请输入应用URL!' }] }
        },
        appIconFile: '',
        appType: ''

      }
    },
    created() {
    },
    computed: {
      uploadAction: function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      add() {
        this.appIconFile = '';
        this.edit({})
      },
      async edit(record) {
        this.form.resetFields()
        this.model = Object.assign({}, record)
        this.visible = true

        // 编辑页面禁止修改角色编码
        if (this.model.id) {
          this.codeDisabled = true
        } else {
          this.codeDisabled = false
        }
        await this.queryTenant(this.tenantId);

        if (this.tenantList.filter(i => { return i.id === this.model.appOrgId }).length === 0) {
          this.model.appOrgId = null;
        }

        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'id', 'appName', 'shortName', 'appCode', 'systemCode', 'appIcon', 'appUrl', 'appType', 'isEnable', 'appOrgId'))
          setTimeout(() => {
              this.appIconFile = this.model.appIcon;
         }, 5)
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      async queryTenant(tenantId) {
        if (tenantId) {
          const res = await queryTenantChildList(tenantId);
          if (res.success) {
            this.tenantList = res.result
          }
        } else {
          this.tenantList = []
        }
      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let formData = Object.assign(this.model, values)
            if (that.appIconFile !== '') {
              formData.appIcon = that.appIconFile
            } else {
              formData.appIcon = ''
            }
            let obj
            console.log(formData)
            if (!this.model.id) {
              obj = addApp(formData)
            } else {
              obj = editApp(formData)
            }
            obj.then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }
        })
      },
      handleCancel() {
        this.close()
      },
      handleChange(value) {
        // APP客户端
        this.appType = value;
      }

    }
  }
</script>

<style scoped>

</style>
